<h3>Sidebar Overview</h3>
The w2sidebar object allows you to create sidebar controls and side panel controls. The sidebar control can have any level of nestedness and will
render nodes on demand. If it is used as a side panel control it can have groups.
<div style="height: 20px"></div>

<h4>Example</h4>
Below is a simple example how to use the sidebar control. It shows the minimum HTML and JavaScript you need to render the sidebar.

<textarea class="html">
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css"
        href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="mySidebar" style="height: 450px; width: 170px"></div>
</body>
<script type="module">
import { w2sidebar } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let sidebar = new w2sidebar({
    name: 'mySidebar',
    nodes: [
        { id: 'level-1', text: 'Level 1', icon: 'w2ui-icon-search', expanded: true,
            nodes: [
                { id: 'level-1-1', text: 'Level 1.1', icon: 'w2ui-icon-info' },
                { id: 'level-1-2', text: 'Level 1.2', icon: 'w2ui-icon-info' },
                { id: 'level-1-3', text: 'Level 1.3', icon: 'w2ui-icon-info' }
                ]
        },
        { id: 'level-2', text: 'Level 2', icon: 'w2ui-icon-search',
            nodes: [
                { id: 'level-2-1', text: 'Level 2.1', icon: 'w2ui-icon-search',
                    nodes: [
                        { id: 'level-2-1-1', text: 'Level 2.1.1', icon: 'w2ui-icon-info' },
                        { id: 'level-2-1-2', text: 'Level 2.1.2', icon: 'w2ui-icon-info' },
                        { id: 'level-2-1-3', text: 'Level 2.1.3', icon: 'w2ui-icon-info' }
                        ]
                    },
                { id: 'level-2-2', text: 'Level 2.2', icon: 'w2ui-icon-info' },
                { id: 'level-2-3', text: 'Level 2.3', icon: 'w2ui-icon-info' }
            ]
        },
        { id: 'level-3', text: 'Level 3', icon: 'w2ui-icon-search',
            nodes: [
                { id: 'level-3-1', text: 'Level 3.1', icon: 'w2ui-icon-info' },
                { id: 'level-3-2', text: 'Level 3.2', icon: 'w2ui-icon-info' },
                { id: 'level-3-3', text: 'Level 3.3', icon: 'w2ui-icon-info' }
            ]
        }
    ],
    onClick(event) {
        console.log(event.target)
    }
})
sidebar.render('#mySidebar')
</script>
</html>
</textarea>

<h4>HTML</h4>
<textarea class="html">
    <div id="sidebar" style="height: 450px"></div>
</textarea>

<h4>Java Script</h4>
<textarea class="javascript">
$('#sidebar').w2sidebar({
name: 'sidebar',
img: null,
nodes: [
{ id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true,
nodes: [ { id: 'level-1-1', text: 'Level 1.1', img: 'icon-page' },
       { id: 'level-1-2', text: 'Level 1.2', img: 'icon-page' },
       { id: 'level-1-3', text: 'Level 1.3', img: 'icon-page' }
     ]
},
{ id: 'level-2', text: 'Level 2', img: 'icon-folder',
nodes: [ { id: 'level-2-1', text: 'Level 2.1', img: 'icon-folder',
         nodes: [
           { id: 'level-2-1-1', text: 'Level 2.1.1', img: 'icon-page' },
           { id: 'level-2-1-2', text: 'Level 2.1.2', img: 'icon-page' },
           { id: 'level-2-1-3', text: 'Level 2.1.3', img: 'icon-page' }
     ]},
       { id: 'level-2-2', text: 'Level 2.2', img: 'icon-page' },
       { id: 'level-2-3', text: 'Level 2.3', img: 'icon-page' }
     ]
},
{ id: 'level-3', text: 'Level 3', img: 'icon-folder',
nodes: [ { id: 'level-3-1', text: 'Level 3.1', img: 'icon-page' },
       { id: 'level-3-2', text: 'Level 3.2', img: 'icon-page' },
       { id: 'level-3-3', text: 'Level 3.3', img: 'icon-page' }
     ]
}
],
onClick: function (id, data) {
console.log(id);
}
});
</textarea>